<template>
  <div id="projectmanage">
    <el-form :inline="true" class="demo-form-inline">
      <el-button @click="addProject">添加项目</el-button>
    </el-form>

    <el-row>
      <el-col
        :span="4"
        v-for="(o, index) in projects"
        :key="o.id"
        :offset="index > 0 ? 2 : 0"
      >
        <el-card :body-style="{ padding: '0px' }">
          <img src="img/photo.jpg" height="200px" />
          <div style="padding: 14px">
            <span>{{ o.projectName }}</span>
            <div class="bottom clearfix">
              <el-button
                type="text"
                class="button"
                @click="showTestPlainVisible(o.id)"
                >测试计划</el-button
              >
              <el-button type="text" class="button">添加</el-button>
              <el-button type="text" class="button">设置</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      title="添加项目"
      :visible.sync="projectDialogVisible"
      width="30%"
    >
      <el-input v-model="projectName"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveProject">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="测试计划" :visible.sync="testPlainVisible">
      <div>

          <el-input v-model="testPlainName"></el-input>
          <el-button @click="addTestPlainBtn">添加测试计划</el-button>
      
      </div>

      <el-table :data="testPlainData">
        <el-table-column
          property="testPlainName"
          label="测试计划"
        
        ></el-table-column>
        <el-table-column
          property="createTime"
          label="添加时间"
    
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getProjects, addProjects,addTestPlain,getTestPlain } from "@/api/project";
export default {
  data() {
    return {
      projects: [],
      currentProjectId:'',
      testPlainVisible: false,
      projectDialogVisible: false,
      projectName: "",
      testPlainName: "",
      testPlainData: [],
    };
  },
  mounted() {
    getProjects().then((res) => (this.projects = res.data));
  },
  methods: {
    addProject() {
      this.projectDialogVisible = true;
    },
    saveProject() {
      addProjects(this.projectName).then((res) => {
        // console.log(res);
        this.projectName = "";
        this.projects.push(res.data);
        this.projectDialogVisible = false;
      });
    },
    addTestPlainBtn() {
      addTestPlain(this.currentProjectId,this.testPlainName).then(
        res=>{
          this.testPlainData.push(res.data)
        }
      )
    },
    showTestPlainVisible(value){
      this.testPlainVisible=true
      this.currentProjectId=value
      getTestPlain(value).then(
        res=>{
          this.testPlainData = res.data
        }
      )
    }
  },
};
</script>

<style>
#projectmanage {
  padding-left: 15px;
  padding-top: 15px;
}
</style>